<template>
  <div class="page-wrapper">
    <div class="page-title"><span class="title-bar"></span> 入库列表</div>
 
    <div class="card table-card">
      <el-table :data="data" class="role-table" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="outbound_code" label="出库编号" align="center" width="180"></el-table-column>
        <el-table-column prop="warehouse_id" label="仓库" align="center" width="120">
          <template #default="{ row }">
            {{ getWarehouseName(row.warehouse_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operate_time" label="出库时间" align="center" width="180">
          <template #default="{ row }">
            {{ formatTime(row.operate_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>    
        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="openApproveDialog(row)"
              :disabled="row.status !== 0"
            >
              审批
            </el-button>
          </template>
        </el-table-column>    
      </el-table>
      
      <div class="pagination-card">
        <el-pagination
          v-model:current-page="Page.PageIndex"
          v-model:page-size="Page.PageSize"
          :page-sizes="[15, 20, 25, 30]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Page.totalCount"
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </div>
    </div>
  <!-- 审批对话框 -->
 <el-dialog 
    v-model="dialogFormVisible" 
    :title="`出库单审批 - ${currentInbound.outbound_code || ''}`" 
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="审批状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1" size="large">同意</el-radio>
          <el-radio :label="2" size="large">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="审批意见" v-if="form.status === 2">
        <el-input 
          v-model="form.remark" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入驳回原因"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleApprove">确认审批</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { read } from '@/stores/host';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
const data = ref([]) 
// 当前操作的入库单
const dialogFormVisible = ref(false)
// 表单数据
const form = reactive({
  id: '',
  status: 1, // 1-同意 2-驳回
  remark: ''
})
interface InboundOrder {
  id: string
  outbound_code: string
  warehouse_id: number
  status: number
  operate_time: string
  remark?: string
  // 其他可能存在的字段...
}

const currentInbound = ref<InboundOrder>({
  id: '',
  outbound_code: '',
  warehouse_id: 0,
  status: 0,
  operate_time: ''
})
const Page=reactive({
totalPage:0,
totalCount:0,
PageIndex:1,
PageSize:15
})

const getrole=()=>{
  read.get("allocateread/api/Transfe/Getoutboundorder",{params:{
  PageIndex:Page.PageIndex,
  PageSize:Page.PageSize
}})
.then(res=>{
  data.value=res.data.data
  Page.totalCount=res.data.totalCount
  Page.totalPage=res.data.totalPage
})
}
onMounted(()=>{
    getrole();
  })
watch(Page,()=>{
  getrole();
})

// 打开审批对话框
const openApproveDialog = (row: any) => {
  currentInbound.value = { ...row }
  form.id = row.id
  form.status = 1
  form.remark = ''
  dialogFormVisible.value = true
}

// 处理审批
const handleApprove = async () => {
  try {
    // 验证驳回时必须填写原因
    if (form.status === 2 && !form.remark.trim()) {
      ElMessage.warning('请填写驳回原因')
      return
    }

    await ElMessageBox.confirm(
      `确定要${form.status === 1 ? '同意' : '驳回'}该出库单吗?`,
      '确认审批',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

const res = await read.post(
      `allocatewrite/api/Transfer/UpdateonboundStatus?id=${form.id}&status=${form.status}`
)
    if (res.data.code === 200) {
      ElMessage.success(res.data.message)
      dialogFormVisible.value = false
      getrole()
    } else {
      ElMessage.error(res.data.message)
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('审批操作失败')
      console.error(error)
    }
  }
}
// 状态标签样式
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0: return 'warning' // 待入库
    case 1: return 'success' // 已入库
    case 2: return 'danger'  // 已驳回
    default: return 'info'
  }
}

// 状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '待出库'
    case 1: return '已出库'
    case 2: return '已驳回'
    default: return '未知状态'
  }
}

// 仓库名称
const getWarehouseName = (id: number) => {
  const warehouses = [
    '第一仓库', '第二仓库', '第三仓库', '第四仓库', '第五仓库',
    '第六仓库', '第七仓库', '第八仓库', '第九仓库', '第十仓库'
  ]
  return warehouses[id - 1] || '未知仓库'
}

// 格式化时间
const formatTime = (time: string) => {
  return time ? time.replace('T', ' ') : '-'
}

</script>

<style scoped>
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
}
.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: #4f8cff;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.title-bar {
  display: inline-block;
  width: 6px;
  height: 28px;
  background: #4f8cff;
  border-radius: 4px;
  margin-right: 14px;
}
.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(79, 140, 255, 0.10);
  margin-bottom: 24px;
  padding: 24px 28px;
}
.table-card {
  padding: 0 0 24px 0;
}
.role-table {
  border-radius: 16px !important;
  overflow: hidden;
}
.el-table th {
  background: #f4f8ff !important;
  font-weight: bold;
  font-size: 1.05rem;
  color: #4f8cff;
}
.el-table .el-table__row {
  transition: background 0.2s;
}
.el-table .el-table__row:hover {
  background: #eaf4ff !important;
}
.pagination-card {
  display: flex;
  justify-content: center;
  margin: 32px 0 0 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(79, 140, 255, 0.08);
  padding: 16px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>